<!--柱形图组件
    组件参数配置说明
    config
        id 组件id。必填
        xAxisData  组件x抽坐标数据
        data 柱形图数据
        name 名称
--->
<template>
    <div :id="config.id" class="box" :style="'height:'+(config.style?config.style.height:'300px')"></div>
</template>
<script>
export default {
    name: 'myChart',
    props:["config"],
    data () {
        return {
            myChart:""
        }
    },
    methods:{
        init(){
            this.myChart = this.$echarts.init(document.getElementById(this.config.id));
            this.myChart.setOption({
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.config.xAxisData,
                        axisTick: {
                        alignWithLabel: true,
                        },
                    }
                ],
                yAxis:[
                    {
                        type: "value",
                    }
                ],
                series:[
                    {
                        name: this.config.name,
                        type: "bar",
                        data: this.config.data,
                        barWidth : 60,
                    }
                ],
            });
        }
    },
    mounted(){
        
        this.$nextTick(()=>{
            this.init();
        })
        
    },
    //销毁组件
    destroyed(){
        this.myChart = "";
    }
}
</script>
<style lang="scss" scoped>
    .box{
        height: 100%;
        width: 100%;
    }
</style>